<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style type="text/css">
    .style1{
      background: red;
    }
    .style2{
      border: 1px solid green;
    }
  </style>
  <script type="text/javascript" src="../static/jquery.js"></script>
  <script>
    //
    window.onload = function () {

    };

    $(function () {
      function f1() {

      }

      function f2() {

      }

      var btn = document.getElementById("btn");
      btn.click = function () {
      };

      var attr = $("#img1").attr("src");
      var height = $("#img1").attr("height");
      // console.log(attr)
      // console.log(height)



    });
    $(document).ready(f3);
    function f3() {

    }
    $(document).ready(function(){
//alert(1);
    });
  </script>

</head>
<body>
<div id="div2"></div>
<input id="input1" >
<br/>
<button id="btn" >测试</button>
<button id="btn1">显示</button>
<div class="style2" id="div1">这是一段文字</div>
<script type="text/javascript">
</script>

<script type="text/javascript">

    $.ajax({
        type: 'get',
        url: 'https://api.apiopen.top/api/sentences',
        data : '',
        dataType: 'json',
        success: function (res) {
            console.log(res)
        },
    })

    let obj = {
        account: "309324904@qq.com",
        password: "123456"
    }

    $.ajax({
        type: 'post',
        url: 'https://api.apiopen.top/api/login',
        // data : obj,
        data: 'account=309324904@qq.com&password=123456',
        dataType: 'json',
        success: function (res) {
            console.log(res)
        },
    })


    window.onload = function () {

    };

    // 失去焦点
    $("#input1").blur(function () {
        console.log(33)
    });
    $("#input1").focus(function () {
        console.log(`11`)
    });
    // 内容发生变化
    $("#input1").change(function () {
        console.log(`22`)
    });
    $("#input1").select(function () {
        console.log(`00`)
    });
    function fn() {
        console.log('fn')
    }
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        console.log(123)
    };


  //点击按钮隐藏图片
  $("#btn").click(function(){
    var val = $("#input1").val();
    // console.log(val)
    //addClass() 为元素class属性添加一个样式名
    // $("#div1").addClass("style1");
//removeClass() 删除元素class属性中指定的样式名
//     $("#div1").removeClass("style2");
// //toggleClass 从元素的class属性中添加/移除指定的样式名
    $("#div1").toggleClass("style2");

    $("#div2").text('<img id="img1" src="../static/img.png" height="200"/>')

    var position = $("#div1").position();
    console.log(position)

    // $("body").append()

    $('<img id="img1" src="../static/img.png" height="200"/>').appendTo($("body"))
  });
  $("#btn1").click(function(){
    $("#img1").show();
  });
</script>
</body>
</html>